<template>
  <view class="container">
    <view class="header">
      <view class="user-info">
        <view class="user-icon">
          <text>{{ userInitial }}</text>
        </view>
        <view>
          <text class="welcome">欢迎, {{ store.state.user?.name || '用户' }}</text>
          <text class="interests">兴趣: {{ userInterests }}</text>
        </view>
      </view>
      <button class="analysis-btn" @click="goToAnalysis">数据分析</button>
    </view>
    
    <view class="stats-section">
      <view class="stat-card" v-for="stat in stats" :key="stat.title">
        <text class="stat-value">{{ stat.value }}</text>
        <text class="stat-title">{{ stat.title }}</text>
      </view>
    </view>
    
    <view class="section">
      <view class="section-header">
        <text class="section-title">热门话题</text>
        <view class="section-icon">🔥</view>
      </view>
      <view class="topic-list">
        <view v-for="topic in hotTopics" :key="topic.id" class="topic-item">
          <text class="topic-name">#{{ topic.name }}</text>
          <text class="topic-count">{{ topic.count }}讨论</text>
        </view>
      </view>
    </view>
    
    <view class="section">
      <view class="section-header">
        <text class="section-title">推荐内容</text>
        <view class="section-icon">💎</view>
      </view>
      <view class="recommend-list">
        <view v-for="item in store.state.recommendations" :key="item.id" class="recommend-item">
          <view class="avatar-placeholder">
            <text>{{ item.username.charAt(0) }}</text>
          </view>
          <view class="content">
            <text class="username">{{ item.username }}</text>
            <text class="text">{{ item.content }}</text>
            <view class="meta">
              <view class="meta-item">
                <view class="meta-icon">👍</view>
                <text>{{ item.likes }}</text>
              </view>
              <view class="meta-item">
                <view class="meta-icon">💬</view>
                <text>{{ item.comments }}</text>
              </view>
              <view class="meta-item">
                <view class="meta-icon">↗️</view>
                <text>{{ item.shares }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import store from '@/store/index.js'

const hotTopics = ref([
  { id: 1, name: '科技前沿', count: '1.2万' },
  { id: 2, name: '旅行摄影', count: '9800' },
  { id: 3, name: '健康生活', count: '7600' },
  { id: 4, name: '美食分享', count: '6500' }
])

const stats = computed(() => store.state.stats || [
  { title: '总发文', value: '1.2k' },
  { title: '总点赞', value: '24.5k' },
  { title: '热点数', value: '56' },
  { title: '参与率', value: '78%' }
])

const userInitial = computed(() => {
  return store.state.user?.name?.charAt(0) || 'U'
})

const userInterests = computed(() => {
  return store.state.user?.interests?.join('、') || '暂无兴趣'
})

const goToAnalysis = () => {
  uni.navigateTo({ 
    url: '/pages/analysis/analysis',
    success: () => console.log('跳转到分析页'),
    fail: (err) => console.error('跳转失败:', err)
  })
}

onMounted(() => {
  if (!store.state.stats) {
    store.dispatch('fetchStats')
  }
  if (!store.state.recommendations.length) {
    store.dispatch('fetchRecommendations')
  }
})
</script>

<style scoped>
.container {
  padding: 15px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 15px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.user-info {
  display: flex;
  align-items: center;
}

.user-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6a11cb, #2575fc);
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  font-weight: bold;
  margin-right: 12px;
}

.welcome {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  display: block;
}

.interests {
  font-size: 12px;
  color: #666;
  display: block;
  margin-top: 3px;
}

.analysis-btn {
  background: #007aff;
  color: white;
  border-radius: 15px;
  padding: 8px 16px;
  font-size: 14px;
  border: none;
  box-shadow: 0 2px 6px rgba(0, 122, 255, 0.3);
}

.stats-section {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.stat-card {
  background: white;
  border-radius: 12px;
  padding: 15px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-value {
  display: block;
  font-size: 24px;
  font-weight: bold;
  color: #007aff;
  margin-bottom: 5px;
}

.stat-title {
  font-size: 14px;
  color: #666;
}

.section {
  background: white;
  border-radius: 12px;
  padding: 15px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.section-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  border-left: 4px solid #007aff;
  padding-left: 10px;
}

.section-icon {
  font-size: 20px;
}

.topic-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.topic-item {
  background: #f0f7ff;
  border-radius: 20px;
  padding: 8px 15px;
  display: flex;
  flex-direction: column;
}

.topic-name {
  font-size: 14px;
  color: #1890ff;
  font-weight: bold;
}

.topic-count {
  font-size: 12px;
  color: #666;
  margin-top: 3px;
}

.recommend-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.recommend-item {
  display: flex;
  padding: 15px;
  border-radius: 12px;
  background: #f9f9f9;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}

.avatar-placeholder {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 10px;
  background: linear-gradient(135deg, #6a11cb, #2575fc);
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  flex-shrink: 0;
}

.content {
  flex: 1;
}

.username {
  font-weight: bold;
  font-size: 14px;
  display: block;
  margin-bottom: 5px;
  color: #333;
}

.text {
  font-size: 14px;
  display: block;
  margin-bottom: 10px;
  color: #555;
  line-height: 1.4;
}

.meta {
  display: flex;
  gap: 15px;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #666;
  font-size: 13px;
}

.meta-icon {
  font-size: 16px;
}
</style>